.reset-button {
    /* 移除内外边距 */
    margin: 0;
    padding: 0;

    /* 移除默认的背景和边框 */
    background: none;
    border: none;

    /* 移除默认的文字样式 */
    font: inherit;
    color: inherit;

    /* 移除按钮的内建样式 */
    appearance: none;
    /* 对于大多数现代浏览器 */
    -webkit-appearance: none;
    /* Safari 和 Chrome */

    /* 移除点击时的轮廓 */
    outline: none;

    /* 可选：确保按钮可以被点击 */
    cursor: pointer;

    /* 如果需要完全去除所有用户交互样式 */
    &:active,
    &:focus,
    &:hover,
    &:after {
        background: none;
        border: none;
        outline: none;
    }
}

.user-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

    .user-header {
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;

        .avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 60rpx;
            margin-right: 30rpx;
        }

        .user-info {
            flex: 1;

            .nickname {
                font-size: 36rpx;
                font-weight: 600;
                color: #333;
                margin-bottom: 12rpx;
                display: block;
            }

            .vip-tag {
                background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
                color: #fff;
                font-size: 24rpx;
                padding: 4rpx 16rpx;
                border-radius: 20rpx;
                display: inline-block;
            }

            .none-vip-tag {
                background: linear-gradient(90deg, #919191 0%, #7a7a7a 100%);
                color: #fff;
                font-size: 24rpx;
                padding: 4rpx 16rpx;
                border-radius: 20rpx;
                display: inline-block;
            }
        }

        .setting-icon {
            width: 72rpx;
            height: 72rpx;
            border-radius: 36rpx;
            background: #f5f6fa;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .stat-row {
        display: flex;
        padding-top: 30rpx;
        border-top: 2rpx solid #f5f6fa;

        .stat-item {
            flex: 1;
            text-align: center;

            .value {
                font-size: 40rpx;
                font-weight: 600;
                color: #333;
                margin-bottom: 8rpx;
                display: block;
            }

            .label {
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}

.function-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40rpx;

        .title {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
        }

        .more {
            display: flex;
            align-items: center;

            text {
                font-size: 26rpx;
                color: #999;
                margin-right: 8rpx;
            }
        }
    }

    .function-list {
        display: flex;
        justify-content: space-between;

        .function-item {
            flex: 1;
            text-align: center;

            .icon-wrapper {
                width: 100rpx;
                height: 100rpx;
                margin: 0 auto 0;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;

                .count-badge {
                    position: absolute;
                    top: -10rpx;
                    right: -10rpx;
                    background: #ff4d4f;
                    color: #fff;
                    font-size: 20rpx;
                    min-width: 32rpx;
                    height: 32rpx;
                    line-height: 32rpx;
                    text-align: center;
                    border-radius: 16rpx;
                    padding: 0 8rpx;
                }

                .function-icon {
                    width: 56rpx;
                    height: 56rpx;
                }
            }

            .function-name {
                font-size: 26rpx;
                color: #666;
            }
        }
    }
}

.service-list {
    background: #fff;
    border-radius: 24rpx;
    padding: 10rpx 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

    .service-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #f5f6fa;

        &:last-child {
            border-bottom: none;
        }

        .left {
            display: flex;
            align-items: center;

            .service-icon {
                width: 64rpx;
                height: 64rpx;
                border-radius: 32rpx;
                margin-right: 24rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .service-name {
                font-size: 28rpx;
                color: #333;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .desc {
                font-size: 24rpx;
                color: #999;
                margin-right: 16rpx;
            }
        }
    }
}

// 背景色
.bg-red {
    background: #ff4d4f;
}

.bg-blue {
    background: #1890ff;
}

.bg-green {
    background: #52c41a;
}

.bg-purple {
    background: #722ed1;
}

.bg-orange {
    background: #fa8c16;
}

.bg-cyan {
    background: #13c2c2;
}

.bg-pink {
    background: #eb2f96;
}

.bg-gray {
    background: #666666;
}